<!--
 * @Description: 添加组件，蒙层对话框
 * @Author: youzi
 * @Date: 2020-05-20 14:11:14
 * @LastEditors: youzi
 * @LastEditTime: 2020-09-15 10:44:34
-->
<template>
  <a-modal
    centered
    title="详情"
    closable
    v-model="realVisible"
    :footer="null"
    @cancel="onClose"
    :maskClosable="false"
    :bodyStyle="bodyStyle"
    :width="600"
  >
    <a-form :form="form">
      <a-form-item v-bind="formItemLayout" label="标题">
        <span>{{ initRecord.title }}</span>
      </a-form-item>
      <a-form-item v-bind="formItemLayout" label="内容">
        <span>{{ initRecord.content }}</span>
      </a-form-item>
      <a-form-item v-bind="formItemLayout" label="状态">
        <span>{{ statusItems[parseInt(initRecord.stat)]['label']}}</span>
      </a-form-item>
      <a-form-item v-bind="formItemLayout" label="图片">
       <span>
          <a :href="initRecord.image" target="_blank"  >
            <img class="img" :src="initRecord.image" alt="" />
          </a>
        </span>
      </a-form-item>
      <a-form-item v-bind="formItemLayout" label="创建时间">
        <span>{{ initRecord.createTime }}</span>
      </a-form-item>
      <a-form-item v-bind="formItemLayout" label="更新时间">
        <span>{{ initRecord.modifyTime }}</span>
      </a-form-item>
    </a-form>
  </a-modal>
</template>
<script>
const formItemLayout = {
  labelCol: { span: 8 },
  wrapperCol: { span: 12 }
};
export default {
  name: 'info',
  props: {
    visible: {
      default: false
    },
    initRecord: {
      type: Object,
      default: () => ({})
    },
    // 状态
    statusItems: {
      type: Array,
      default: () => []
    },
    apiURL: {
      type: Object,
      default: () => ({})
    }
  },
  data() {
    return {
      formItemLayout,
      form: this.$form.createForm(this)
    };
  },
  mounted() {},
  computed: {
    bodyStyle() {
      return {
        maxHeight: window.innerHeight * 0.8 + 'px',
        overflowY: 'scroll',
        padding: 0
      };
    },
    realVisible: {
      get() {
        return this.visible;
      },
      set(val) {
        return val;
      }
    }
  },
  methods: {
    onClose() {
      this.$emit('close');
    }
  }
};
</script>
<style scoped>
  .img {
    width: 8rem !important;
  }
</style>
